<template>
  <view>
    <u-popup
			v-model="phonenumber_show"
			mode="bottom"
			border-radius="50"
			width="750rpx"
			:height="height - 184"
			@close="event_phone_close"
			:safe-area-inset-bottom="iphoneX"
			:mask-close-able="true"
		>
			<view
				class="u-text-center"
				style="
					font-weight: 500;
					font-size: 28rpx;
					color: #333;
					padding-top: 36rpx;
					margin-bottom: 46rpx;
				"
			>
				<text>绑定手机号，让您的操作更便捷</text>
			</view>
			<u-button
				@getphonenumber="handlePhonenumber"
				:custom-style="{
					borderRadius: '24rpx',
					height: '96rpx',
					fontSize: '32rpx',
					width: '90%',
					backgroundColor: '#F56B79'
				}"
				ripple
				type="error"
				open-type="getPhoneNumber"
				>一键绑定手机号</u-button
			>
		</u-popup>
  </view>
</template>
<script>
import Login from 'api/login'

export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		height: {
			type: Number,
			default: 432
		}
	},
	data() {
		return {
			phonenumber_show: false
		}
	},
	watch: {
		show_change(val) {
			this.phonenumber_show = val
		}
	},
	methods: {
		event_phone_close() {
			this.$emit('close')
		},
		async handlePhonenumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
				return
			}
			let res = await Login.bindPhone(e.detail.encryptedData, e.detail.iv)
			console.log(res)
			if (res) {
		    this.phonenumber_show = false
				uni.setStorageSync('phoneData', {
					account_phone: res.data.phoneNumber,
					phone: '',
				})
		    setTimeout(() => {
		      uni.$emit('refresh')
		    }, 1000)
			}
		}
	}
}
</script>